<script setup lang="ts">
import { ref } from 'vue';

const text = ref('Button Edit 按钮输入框');
const alignLeft = ref('left');
const alignCenter = ref('center');
const alignRight = ref('right');
</script>
<template>
    <div class="my-2">
        <span>缺省对齐: </span>
    </div>
    <f-button-edit v-model="text"></f-button-edit>
    <div class="my-2">
        <span>居左对齐: </span>
    </div>
    <f-button-edit :text-align="alignLeft" v-model="text"></f-button-edit>
    <div class="my-2">
        <span>居中对齐: </span>
    </div>
    <f-button-edit :text-align="alignCenter" v-model="text"></f-button-edit>
    <div class="my-2">
        <span>居右对齐: </span>
    </div>
    <f-button-edit :text-align="alignRight" v-model="text"></f-button-edit>
</template>
